import React from 'react';
import { useState } from 'react';
import { useEffect } from 'react';
import "./App.css";

const App = () => {
    const [list,setList] = useState([]);
    const [collectedList,setCollectedList] = useState([]);

    const collect = (id) => {
        const newList = list.map(item => {
            if(item.plantID === id && item.isCollected === false) {
                setCollectedList([...collectedList,{'id':item.plantID,'name':item.name}]);
                return {...item,isCollected:true};
            }else if(item.plantID === id && item.isCollected === true){
                alert("您已收藏！");
                return item;
            }else{
                return item;
            }
        });
        setList(newList);
    };

    const cancelCollect = (id) => {
        const newList = list.map(item => {
            if(item.plantID === id) {
                setCollectedList(collectedList.filter(item => id !== item.id))
                return {...item,isCollected:false};
            }else{
                return item;
            }
        });
        setList(newList);
    };

    useEffect(() => {
        fetch("https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants")
        .then(res => res.json())
        .then(res => {
            setList(res.result.plantList.map(item => {
                return {
                    ...item,
                    isCollected:false
                };
            }));
        });
        for(let i=0;i<localStorage.length;i++) {
            if(localStorage.key(i) === 'collectedList') {
                setCollectedList(JSON.parse(localStorage.getItem('collectedList')));
            }else{
                continue;
            }
        }
        
        
    },[]);

    useEffect(() => {
        localStorage.setItem('collectedList',JSON.stringify(collectedList));
    },[collectedList]);

    useEffect(() => {
        collectedList.forEach(collectedListItem => {
            list.map(listItem => {
                if(collectedListItem.id === listItem.plantID) {
                    return {...listItem,isCollected:true};
                }else{
                    return listItem;
                }
            })
        });
        console.log(list)
    },[collectedList]);

    return (
        <div>
            <div className='header'>
                <h1>收藏列表</h1>
                <ul className='collectList'>
                    {
                        collectedList.map(item => {
                            return <li key={item.id}>
                                <span>{item.name}</span>
                                <button onClick={() => cancelCollect(item.id)}>取消收藏</button>
                            </li>
                        })
                    }
                </ul>
            </div>
            <div className='content'>
                <h1>鲜花列表</h1>
                <ul className='list'>
                    {
                        list.map(item => {
                            return <li key={item.plantID} className='list-item'>
                                <img src={item.coverURL} alt={item.name} />
                                <span>{item.name}</span>
                                <span>{item.engName}</span>
                                {
                                    item.area === ''?<span>产地：未知产地</span>:<span>产地：{item.area}</span>
                                }
                                {
                                    item.isCollected ? <button onClick={() => collect(item.plantID)}>已收藏</button> 
                                    : <button onClick={() => collect(item.plantID)}>收藏</button>
                                }
                                
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    );
}

export default App;